<template id="shopDetails">
    <div>
        <div class="shopDetails_top">
            <img src="../image/dayu.jpg" alt=""  @click="getShopDetails()">
            <div class="shopDetails_a">
                <router-link :to="{path:'/shopDetails/commodity', query:{goods_id:id}}" v-bind:id="[active1]" v-on:click.native="showS(1)">商品</router-link>
                <router-link :to="{path:'/shopDetails/detail', query:{goods_id:id}}" v-bind:id="[active2]" v-on:click.native="showS(2)">详情</router-link>
                <router-link :to="{path:'/shopDetails/shopEvaluate', query:{goods_id:id}}" v-bind:id="[active3]" v-on:click.native="showS(3)">评价</router-link>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
    export default{
        name: 'shopDetails',
        data() {
            return {
                id:this.$route.query.goods_id,
                active1:'',
                active2:'',
                active3:'',
            }
        },
        mounted:function () {
            this.menus();
        },
        methods:{
            menus:function(){
                let url = this.$route.path;
                if(url == '/shopDetails/commodity'){
                    this.active1='showS'
                }
                if(url == '/shopDetails/detail'){
                    this.active2='showS'
                }
                if(url == '/shopDetails/shopEvaluate'){
                    this.active3='showS'
                }
            },
            showS:function(id){
                this.active1='';
                this.active2='';
                this.active3='';
                if(id == 1){this.active1 = 'showS';}
                if(id == 2){this.active2 = 'showS';}
                if(id == 3){this.active3 = 'showS';}

            },
            getShopDetails:function(){
                window.history.go(-1);
            },
        },

    };

</script>
<style>
    #showS{
        color:green;
        border-bottom:0.01rem solid green;
    }
    /*动态样式*/
    .shopDetails_a{
        height:0.77rem;
        width:3.17rem;
        margin:auto;
        display:flex;

    }
    .shopDetails_a a{
        display:block;
        flex:1;
        line-height:0.77rem;
        text-decoration:none;
        color:#373737;
        font-size:0.26rem;
        text-align:center;
    }
.shopDetails_top{
    width:100%;
    height:0.77rem;
    position:relative;
    border-bottom:1px solid #cfcecd;
}
    .shopDetails_top img{
        position:absolute;
        display:block;
        height:0.37rem;
        width:0.31rem;
        left:0.25rem;
        top:0.2rem;
    }
</style>
